<template>
    <div>
        <table border="1" width="500">
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>爱好</td>
                <td>出生年月</td>
            </tr>
            <tr v-for="(item ,index) in data" :key="index">
                <td>{{ index }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.age }}</td>
                <td>{{ item.sex }}</td>
                <td>{{ item.like }}</td>
                <td>{{ item.time | formDate }}</td>
            </tr>
        </table>

        <div class="box">
            <h1>标题</h1>
            姓名：<input type="text" placeholder="请输入名字"> <br><br>
            性别：<input type="radio">男<input type="radio">女 <br> <br>
            年龄：<input type="text" placeholder="请输入年龄"> <br><br>
            出生年月: <input type="date"> <br><br>
            <button>保存</button><button>取消</button><br>
            
        </div>
    </div>
</template>

<script>
    export default{
         data(){
            return{
                data:[{

                    name:"孙悟空",
                    age:500,
                    sex:"男",
                    like:"紫霞仙子",
                    time:122223123
                },{
                    name:"猪八戒",
                    age:500,
                    sex:"男",
                    like:"翠兰",
                    time:122223123
                },{
                    name:"大闸蟹",
                    age:500,
                    sex:"男",
                    like:"被吃",
                    time:122223123
                }]
            }
        },
        methods:{

        },
        filters:{
            FormDate(value){
                let data = new Date(value)

                // 年
                let yy = data.getFullYear()

                let mm = data.getMonth() + 1

                let dd = data.getDate()

                let hh = data.getHours()

                let mms =data.getMinutes()

                let ss = data.getSeconds()

                return `${yy}-${mm}-${dd} ${hh}:${mms}:${ss}`
            }
        }
    }
</script>
<style>
    .box{
        width: 350px;
        height: 350px;
        border: 1px solid black;
        text-align: left;
        margin: 0 auto;
    }
</style>